<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="get">get</button>
    <button class="post">post</button>
</body>
<script>
    var getBtn = document.getElementsByClassName("get")[0];
    var postBtn = document.getElementsByClassName("post")[0];


    // 请求的流程
    // 1. 创建请求
    // 2. 配置请求相关信息
    // 3. 发送请求
    // 4. 绑定事件 监听服务器响应
    // 5. 获取响应数据 -> 后期处理


    getBtn.onclick = function () {
        var wd = "";
        var col = "id";
        var type = "asc";
        var page = 1;
        var size = 10;

        /* var xhr = new XMLHttpRequest();

        xhr.open("get", `http://121.43.116.41/demo/php/searchGradeOrderLimit.php?wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`, true)

        xhr.send();

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var res = xhr.responseText;
                // console.log(res);  // json字符串
                res = JSON.parse(res);
                console.log(res);  // js对象

                // 搜索 => 拿到数据渲染

            }
        } */

        // debugger;
        // get("http://121.43.116.41/demo/php/searchGradeOrderLimit.php",`wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`,true,"json",function(res){
        //     console.log("请求成功",res);
        // })

        // 错误示范 =>参数有误
        // get("get","http://121.43.116.41/demo/php/searchGradeOrderLimit.php",`wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`,true,"json",function(res){
        //     console.log("请求成功",res);
        // })
    }


    /* 
        url:请求的地址
        data:携带的数据(参数数据队列 a=1&b=2&c=3)
        async:是否异步(默认true)
        dataType: 接口返回的数据类型 (方法默认text, 其他类型需要用户指定)
        success:  请求成功时执行的回调函数  => 函数有一个形参,用于接收请求的数据

        此封装缺点: 参数传参 -> 讲究一一对应 => 万一参数对不上->结果就有问题

        提示 => 有没有什么方法 => 让参数传参可以部分先后,且对每个数据都有较为详细的描述

        解决方法:  传入一个对象 => 对象对应键名取值,和顺序无关,  对象还可以为每个值做详细的描述
    
    */
    function get(url, data, async=true,dataType = "text",success) {
        var wd = "";
        var col = "id";
        var type = "asc";
        var page = 1;
        var size = 10;

        var xhr = new XMLHttpRequest();

        xhr.open("get", data ? url + "?" + data : url, async)

        xhr.send();

        xhr.onreadystatechange = function () {
            // debugger;
            if (xhr.readyState == 4 && xhr.status == 200) {
                var res = xhr.responseText;
                if(dataType == "json"){
                    res = JSON.parse(res);
                }
                // console.log(res);  // js对象

                // 获取数据之后 -> 可能要执行的操作不一样
                // 搜索 => 拿到数据渲染
                // 注册 -> 跳转登录
                // 删除 -> 提示

                // 请求成功时执行的回调函数
                if(success && typeof success == "function"){
                    success(res);  // 调用回调函数值,请求的数据作为实参
                }
            }
        }
    }

</script>

</html>